<template>
	<view>
		<maps :pointList="pointList"></maps>	
		<navbar></navbar>
		<div class="container">
			<ul class="typeSlide">
<<<<<<< HEAD
				<li v-for="item in typeList" @tap="Switch(item)">{{item}}</li>
=======
				<li v-for="(item,index) in typeList" @tap.stop="switchover(index)" :class="index==indexs? 'box':''">{{item}}</li>
>>>>>>> 983564b48a048a803b2e05f789bd015af7225c28
			</ul>
		
			<component v-bind:is="currentView" ref="popup" @mapList="showPoint"></component>
		</div>
		<!-- 底部导航 -->
		<u-tabbar  :list="tabbarList" height="40px"></u-tabbar>
	</view>
</template>

<script>
	import maps from "../../components/common/map.vue";
	import rainfall from "./rainfall/index.vue";
	import Inflow from "./Inflow/Inflow.vue";
	import reservoir from "./reservoir/reservoir.vue"
	import pipeNetwork from "./pipeNetwork/pipeNetwork.vue"
	import hydrops from "./hydrops/hydrops.vue"
	import rain from "./rain/rain.vue"
	
	export default {
		data() {
			return {
				indexs:0,
				typeList:['降水','来水','水库','河道','管网','积水'],
				currentView:'rain', //默认为降水组件
				array:['rain','Inflow','reservoir','rainfall','pipeNetwork','hydrops'],
				pointList:[]
			}
		},
		components: {
			maps,
			rainfall,
			Inflow,
			reservoir,
			pipeNetwork,
			hydrops,
			rain
		},
		computed: {
			tabbarList (){
				return this.$store.state.common.tabbarList
			}
		},
		methods: {
<<<<<<< HEAD
			Switch(id){
				console.log(id)
			}
=======
			switchover(index){
				this.indexs=index
				this.currentView = this.array[this.indexs]
			},
			showPoint(data){
				this.pointList = data
				console.log(this.pointList)
			}
		},
		mounted() {
			
>>>>>>> 983564b48a048a803b2e05f789bd015af7225c28
		}
}
</script>

<style lang="scss" scoped>
.container{
	.typeSlide{
		 position: absolute;
		 right: 20px;
		 top: 50px;
		li{
			border: 1px solid #ddd;
			margin-bottom: 10px;
			width: 50px;
			text-align: center;
			line-height: 50px;
			background-color: #fff;
		}
		.box{
			background-color: #007AFF;
			color: #FFFFFF
		}
	}
}

</style>
